<template>
  <div>
    <!-- 
      情况一：无key 
      就地更新
     -->
    <ul>
      <li v-for="item in arr">{{item}}</li>
    </ul>
    <button @click="addFn">点我，给数组添加元素</button>
    <!-- 
      有key

      总结：
      作用：结合虚拟DOM提高Dom渲染性能
     -->
     <ul>
       <li v-for="item in arrObj" :key="item.id">{{item.name}}</li>
     </ul>
     <button @click="changeFn">有key</button>

     <!-- 
       有key 且key为下标值的时候，和无key时效果一样，只就地更新
      -->
    <ul>
      <li v-for="(item,index) in arr" :key="index">{{item}}</li>
    </ul>
    <button @click="addFn">点我，给数组添加元素</button>

    <!-- 
      总结：v-for中key值的使用
          有id用id，无id用索引
      
      key: 必须是唯一不重复的字符串或者是数字
     -->


  </div>
</template>

<script>
export default {
  data(){
    return {
      arr: [ "老大","老二","老三" ],
      arrObj: [
        {
          name:　"老大",
          id: 1
        },{
          name:　"老二",
          id: 2
        },{
          name:　"老三",
          id: 3
        }
      ]
    }
  },
  methods: {
    addFn(){
      this.arr.splice(1, 0, "新来的")
    },
    changeFn(){
      this.arrObj.splice(1, 0, {
        id: 4,
        name: "新来的"
      })
    }
  }
}
</script>

<style>

</style>